<!--
 *                   ___====-_  _-====___
 *             _--^^^#####//      \\#####^^^--_
 *          _-^##########// (    ) \\##########^-_
 *         -############//  |\^^/|  \\############-
 *       _/############//   (@::@)   \############\_
 *      /#############((     \\//     ))#############\
 *     -###############\\    (oo)    //###############-
 *    -#################\\  / VV \  //#################-
 *   -###################\\/      \//###################-
 *  _#/|##########/\######(   /\   )######/\##########|\#_
 *  |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 *  `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *     `   `  `      `   / | |  | | \   '      '  '   '
 *                      (  | |  | |  )
 *                     __\ | |  | | /__
 *                    (vvv(VVV)(VVV)vvv)
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                神兽保佑            永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-02-25 16:16:32
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-04-05 17:17:15
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <el-card class="container" shadow="never">
    <div slot="header" class="header">
      <div class="title">
        我的应用
        <svg-icon icon-class="lightning" class="icon" />
      </div>
    </div>
    <div v-loading="loading" class="content">
      <div v-for="menu in list" :key="menu.id" class="item" @click="$router.push({name: menu.key})">
        <i v-if="MenuIcon[menu.key].indexOf('el-icon')===0" :class="`${MenuIcon[menu.key]} icon`" />
        <svg-icon v-else :icon-class="MenuIcon[menu.key]" class="icon" />
        {{ menu.name }}
      </div>

    </div>
  </el-card>
</template>
<script>
import { MenuIcon } from '@/utils/constant'
import { GetQuickMenu } from '@/api/home'
export default {
  data() {
    return {
      MenuIcon,
      loading: false,
      list: []
    }
  },
  async created() {
    this.loading = true
    const { code, data } = await GetQuickMenu()
    this.loading = false
    if (+code === 1) {
      this.list = data && data.list ? data.list : []
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.content {
  margin: -21px;
  display: flex;
  flex-wrap: wrap;
  ::v-deep .el-loading-spinner {
    margin-top: 0 !important;
  }
  .item {
    padding: 24px 0;
    flex-basis: 33.333333%;
    position: relative;
    transition: all 0.3s;
    text-align: center;
    cursor: pointer;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      box-shadow: 1px 0 0 0 #f0f0f0, 0 1px 0 0 #f0f0f0, 1px 1px 0 0 #f0f0f0,
        inset 1px 0 0 0 #f0f0f0, inset 0 1px 0 0 #f0f0f0;
    }
    &:hover {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    }
  }
}
</style>
